
import { defineComponent, ref } from 'vue';
import {stepStatus, stepStatusStyle} from '@/constants/approvalCenter'
import './step.scss';
import _ from 'lodash'
const Step = defineComponent({
  name: 'Step',
  props: {
    approvalDetailList: {
      type: Array,
      default: () => []
    },
    activeIndex: {
      type: Number,
      default: 1
    }
  },
  setup(props, { slots, attrs, emit }) {
    return () => {
      const { approvalDetailList, activeIndex } = props;

      return (
        <div class="step-list">
          <ul>
            {approvalDetailList?.map((v: any, num: any) => (
              <li v-show={num != 0 && num != approvalDetailList.length - 1}>
                <div class="titleDot">
                  <div v-show={v.approvalDetailVOList[0]?.remark}>
                    <a-tooltip content={v.approvalDetailVOList[0].remark}>
                      <div
                          class={
                            v.approvalDetailVOList[v.approvalDetailVOList.length - 1]
                              .approveState === 'REJECT'
                              ? 'dotRed' : !v.processed
                              ? 'dotGrey'
                              : 'dot'
                          }
                        ></div>
                    </a-tooltip>
                  </div>
                    <div
                      v-show={!v.approvalDetailVOList[0]?.remark}
                      class={
                        v.approvalDetailVOList[v.approvalDetailVOList.length - 1]
                          .approveState === 'REJECT'
                          ? 'dotRed' : !v.processed
                          ? 'dotGrey'
                          : 'dot'
                      }
                    ></div>
                    {/* 前端处理去掉首位节点，-2是为了最后一个节点的线不展示 */}
                  {num < approvalDetailList.length - 2 && (
                    <div class={['bar', {greyLine: !v.processed || 
                      v.approvalDetailVOList[v.approvalDetailVOList.length - 1]
                          .approveState === 'REJECT'
                    }]}></div>
                  )}
                </div>
                {v.approvalDetailVOList.map((item: any, index: any) => {
                  return (
                    <div class={["detailData", {'mt-18': index > 0}]}>
                      {/* {index != 0 && <div class="dotData"></div>} */}
                      <div v-show={index != 0} style={{marginTop: '12px'}}>
                        <div v-show={item.remark}>
                          <a-tooltip content={item.remark}>
                            <div
                              class={
                                item.approveState === 'REJECT'
                                  ? 'dotRed' : !v.processed
                                  ? 'dotGrey'
                                  : 'dot'
                              }
                            ></div>
                          </a-tooltip>
                        </div>
                        <div
                          v-show={!item.remark}
                          class={
                            item.approveState === 'REJECT'
                              ? 'dotRed' : !v.processed
                              ? 'dotGrey'
                              : 'dot'
                          }
                        ></div>
                      </div>
                      <div class="orderName" v-show={index === 0}>
                        <span>{item.orderName}</span>
                      </div>
                      <div class="approveUserName">
                        {
                          item.approveByList?.map((p:any, i:any) => {
                            return (
                              <div >
                                {
                                  p?.currentApproveUserList?.map((c:any, index:any) => {
                                    return (
                                      <>
                                        <span>{c.name}</span>
                                        <span v-show={index != p.currentApproveUserList.length - 1}>、</span>
                                      </>
                                    )
                                  })
                                }
                                <span 
                                  v-show={p.approveState && p.approveState != 'UN_APPROVAL'} 
                                  class={[stepStatusStyle[p.approveState]]}>
                                  【{stepStatus[p.approveState]}】
                                </span>
                              </div>
                            )
                          })
                        }
                        {/* <span style="margin-left:20px">{item.remark}</span> */}
                      </div>
                      <div class="time">{item.approveTime}</div>
                    </div>
                  );
                })}
              </li>
            ))}
          </ul>
        </div>
      );
    };
  }
});
export default Step;
